<template>
  <div class="hot">
  	  <div class="hot-title">A</div>
      <ul class="hot-content">
  	    <li class="hot-item" v-for="item in a" :key="item.id">{{item.name}}</li>
      </ul>
  </div>
</template>

<script>
	export default {
		name: 'CityA',
		props: {
			A:Array
		},
		computed: {
			a(){
				if(!this.A.length%4==0){
					let len=4-this.A.length%4
					for(let i=0;i<len;i++){
						this.A.push({
						  id:this.A.length+9999,
						  spell: "",
							name: ""
						})
					}
				}
			return this.A
			}
		}
	}
</script>

<style lang="stylus" scoped>
.hot-title
  height 1.6rem
  line-height 1.6rem
  font-size .4rem
  text-indent 1em
.hot-content
  width 100%
  background #fff
  display flex
  flex-flow: row wrap
  .hot-item
    flex 0 1 25%
    height 2.4rem
    font-size .6rem
    text-align center
    line-height 2.4rem
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    box-sizing border-box
    border-top 1px solid #ccc
    border-right 1px solid #ccc
  .hot-item:nth-child(-n+4)
    border-top none
  .hot-item:nth-child(4n+4)
    border-right none
</style>
